ReactのMain Concept：11. Composition vs Inheritance
要点：Reactはパワフルな委譲（composition）のモデルを持っている。コンポーネント間でコードを使い回すために、継承（inheritance）よりもそっちがおすすめ
React初心者がやりがちな継承の使い方の問題を考えて、委譲でどのように問題解決するか考えていく
Containment（封じ込め）
componentは事前に子をしらない。特に一般的な"boxes"を表すSidebarやDialogにとっては普通
自分（component）の中に何が入っているかを気にしたくないkadoyau.icon
そういうcomponentにおすすめの方法
子要素を出力に直接入れるために、children propを使う
他のコンポーネントは、JSXでネストすることによって、任意の子を渡すことができる
code:children.js
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
// のh1やpはFancyBorder内で{props.children}として取得できる
それほど普通ではないがときどき複数の"hole"をcomopnentにほしいくなることがある
こんなとき、childrenの代わりに、こんなやり方を思いつくかもしれない
<Contacts />などのReact elementは単なるオブジェクトなので、他のデータと同様にpropsとして渡すことができる
この方法は他のライブラリで言う"slots"を思い出させるかもしれないが、Reactにおけるpropsとして渡せるものに制約はない
Specialization
ときどきcomponentを他のcomopnentの"special cases"と捉えることがある
例えば、WelcomeDialogはDialogの特別なケースに見えるでしょ？
Reactでは、このこともcompositionによって達成できる。"specific" componentがより"generic"なコンポーネントを描画して、propsで設定する
例：WelcomeDialogがDialogに特定のpropsを渡して、Dialogを返す
Composititionはcomponentがclassとして定義されていても同様にうまく働く
So What About Inheritance?
Facebookの開発で、数千のcomponentをつかったけど、階層を継承するcomponentをつかうのがおすすめなケースはみあたらなかった
Propsとcompositionは、componentの見た目とふるまいを、明確で安全な方法でカスタマイズするために十分なflexibilityを提供する
componentは任意のpropsを受け入れることを思い出して
プリミティブも、React elementも、functionもわたせる
もしあなたがUIではない機能をcomponent間で再利用したいなら、それをほかの JS moduleに分離することを提案する
そうすれば、そのcomponentをextendすることなしに、importすればfunction, object, classをつかえる